<template>
	<view class="people-list" >
		<view class="title-box">
			<span>缅怀英烈</span>
			<image src="../../../static/uview/common/z_big-img.png" mode="widthFix"></image>
		</view>
		
		<!-- 搜索 -->
		<view class="list-search" >
			<u-search :show-action="false" height="80" border-color="#d7d7d7" bg-color="#ffffff" placeholder="请输入小镇、年份、关键字" v-model="searchName" @change="handSearch"></u-search>
		</view>
		
		<!-- 列表 -->
		<view class="content-list">
			<view class="list-box" v-for="(item,index) in dataList" :key="index" >
				<image src="../../../static/uview/common/z_big-img.png" ></image>
				<view class="list-name" >{{item.name}}</view>
				<view class="list-time" >{{item.startTime}}-{{item.endTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchName:'', // 搜索名称
				dataList:[
					{
						url:'../../../static/uview/common/z_big-img.png',
						name:'白子明',
						startTime:'1900.08',
						endTime:'1949.05'
					},
					{
						url:'../../../static/uview/common/z_big-img.png',
						name:'曹长生',
						startTime:'1900.08',
						endTime:'1949.05'
					},
					{
						url:'../../../static/uview/common/z_big-img.png',
						name:'曹长锁',
						startTime:'1900.08',
						endTime:'1949.05'
					},
					{
						url:'../../../static/uview/common/z_big-img.png',
						name:'曹三才',
						startTime:'1900.08',
						endTime:'1949.05'
					},
					{
						url:'../../../static/uview/common/z_big-img.png',
						name:'曹天启',
						startTime:'1900.08',
						endTime:'1949.05'
					},
					{
						url:'../../../static/uview/common/z_big-img.png',
						name:'车中元',
						startTime:'1900.08',
						endTime:'1949.05'
					},
					{
						url:'../../../static/uview/common/z_big-img.png',
						name:'白子明',
						startTime:'1900.08',
						endTime:'1949.05'
					},
					{
						url:'../../../static/uview/common/z_big-img.png',
						name:'白子明',
						startTime:'1900.08',
						endTime:'1949.05'
					},
					{
						url:'../../../static/uview/common/z_big-img.png',
						name:'白子明',
						startTime:'1900.08',
						endTime:'1949.05'
					},
					{
						url:'../../../static/uview/common/z_big-img.png',
						name:'白子明',
						startTime:'1900.08',
						endTime:'1949.05'
					}
				]
			};
		},
		
		methods:{
			handSearch(value){
				console.log(value)
			}
		}
	}
</script>

<style lang="less">
	.people-list{
		.title-box {
			position: relative;
			span { 
				position: absolute;
				top: 0upx;
				left: 32upx;
				font-size: 48upx;
				font-weight: 600;
				color: #1B1B1B;
			}
			image{
				width: 100%;
				height: 262upx;
				padding-top: 46upx;
			}
		}
		
		.list-search{
			padding: 10upx 20upx 20upx 20upx;
		}
		
		.content-list {
			overflow: hidden;
			margin: 0 33upx;
			.list-box {
				width: 190upx;
				height: 265upx;
				padding:12upx;
				background: url(../../../static/uview/common/z_list_bg.png) 0 0 no-repeat;
				background-size: 100% 100%;
				text-align: center;
				float: left;
				margin-right: 52upx;
				margin-bottom: 10upx;
				image {
					width: 100%;
					height: 184upx;
				}
				.list-name {
					font-size: 26rpx;
					color: #515151;
					margin-top: -6upx;
				}
				.list-time {
					font-size: 18rpx;
					color: #727272;
					// margin-top: -6upx;
				}
			}
			.list-box:nth-child(3n+3) {
				margin-right: 0;
			}
		}
	}
</style>
